<template>
  <div class="content-jcbox">
    <div class="jcbox-title">
      <div class="tit-le">
        <i @click="$router.go(-1)" class="iconfont icon-arrow-right"></i>
      </div>
      <div class="tit-rg">
        <span>我的教程</span>
      </div>
    </div>
    <div class="jcbox-box">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="10"
        >
          <van-empty
            v-show="empty"
            class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png"
            description="目前您还没有发布过教程哦"
          />
          <van-skeleton v-show="skeleton" v-for="(item,index) of 5" :key="index" title avatar :row="5" />
          <div v-for="(item,index) of usertutorial" :key="index" class="box-msg" @click="gojcisd(item)">
            <div class="msg-img-box">
              <img :src="item.imgs[0]" alt="">
            </div>
            <div class="msg-text">
              <div class="text-theme">
                <span>{{ item.tttheme }}</span>
              </div>
              <div class="text-content">
                <span>{{ item.tocontent }} </span>
              </div>
            </div>
            <div class="msg-cz">
              <div class="cz-le">
                <span>{{ item.newaddTime }}</span>
              </div>
              <div class="cz-rg">
                <div class="cz-box">
                  <i class="iconfont icon-dianzan2"></i>
                  <span>{{ item.thumbs.length }}</span>
                </div>
                <div class="cz-box">
                  <i class="iconfont icon-pinglun3"></i>
                  <span>{{ item.comments.length }}</span>
                </div>
                <div class="cz-box">
                  <i class="iconfont icon-fenxiang"></i>
                </div>
                <div class="cz-box" @click.stop="destorys(item)">
                  <i class="iconfont icon-shanchu"></i>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import {Dialog, Toast} from "vant";

export default {
  name: "userjc",
  data(){
    return{
      usertutorial: [],
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
      jcmaxpage: null,
      skeleton: true,
      empty: false,
    }
  },
  created() {
    const uid = localStorage.getItem("uid");
    this.jcfind(uid)
  },
  methods:{
    async destorys(item){
      console.info(item)
      Dialog.confirm({
        title: '温馨提示',
        message: '该操作会永久删除,是否要删除',
      })
        .then(async () => {
          const res = await this.$axios({
            url: '/blog/tutorialdelete',
            method: 'post',
            data: {
              tutorialid: item.tutorialid
            }
          })
          const { success, msg } = res.data
          if(success){
            Toast.success(msg);
            this.onRefresh();
          }else {
            Toast.fail(msg);
          }
        })
        .catch(() => {
          // on cancel
        });
    },
    onLoad(){
      console.info("加载数据")
      const uid = localStorage.getItem("uid");
      this.loading = true;
      if (this.page > this.jcmaxpage) {
        this.loading = false;
        this.finished = true;
      }else {
        setTimeout(()=>{
          this.jcfind(uid)
          this.loading = false;
        },1000)
      }
    },
    onRefresh(){
      this.skeleton = true
      setTimeout(() => {
        const uid = localStorage.getItem("uid");
        this.usertutorial = []
        this.page = 1
        this.jcfind(uid)
        this.refreshing = false;
        this.finished = false;
        this.skeleton = false;
      }, 1000);
    },
    async jcfind(uid){
      try {
        const res = await this.$axios({
          url:'/blog/tutorialfind',
          method:"post",
          data:{
            uid,
            page: this.page,
          }
        })
        const {success, msg, data, length, maxpage} = res.data
        if (success){
          if(data.rows.length == 0 && this.page == 1){
            this.empty = true
            this.skeleton = false
          }
          if(data.rows.length != 0){
            this.skeleton = false;
          }
          data.rows.map(r=>{
            const year = new Date(r.addTime).getFullYear();
            const mouth = `${new Date(r.addTime).getMonth()+1}`.padStart(2, 0);
            const day = `${new Date(r.addTime).getDate()}`.padStart(2, 0);
            r.newaddTime = `${year}-${mouth}-${day}`
            r.imgs = []
            r.pictures.map(url=>{
              r.imgs.push(url.photourl)
            })
          })
          this.jcmaxpage = maxpage
          data.rows.forEach(r=>{
            this.usertutorial.push(r)
          })
          this.page++;
          console.info(data.rows)
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    gojcisd(item){
      this.$router.push({
        name: "jcisd",
        params: {
          tutorial: item
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.content-jcbox{
  height: 100%;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  .jcbox-title{
    width: 100%;
    height: vw(90);
    box-sizing: border-box;
    line-height: vw(90);
    background-color: #ffffff;
    display: flex;
    .tit-le{
      width: vw(100);
      i{
        margin-left: vw(30);
        font-size: vw(50);
        color: #c1c1c1;
      }
    }
    .tit-rg{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        transform: translate(vw(-50),vw(2));
        font-size: vw(32);
      }
    }
  }
  .jcbox-box{
    flex: 1;
    width: 100%;
    background-color: #ffffff;
    overflow-y: auto;
    .box-msg{
      width: vw(690);
      margin: vw(10) auto;
      .msg-img-box{
        img{
          width: 100%;
          height: vw(400);
          object-fit: cover;
        }
      }
      .msg-text{
        margin-top: vw(20);
        .text-theme{
          font-size: vw(35);
          font-weight: bold;
        }
        .text-content{
          font-size: vw(25);
          -webkit-line-clamp: 2;
          letter-spacing:2px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          white-space: normal;
        }
      }
      .msg-cz{
        display: flex;
        .cz-le{
          display: flex;
          align-items: center;
          span{
            font-size: vw(25);
            color: #d5d5d5;
          }
        }
        .cz-rg{
          flex: 1;
          display: flex;
          justify-content: flex-end;
          .cz-box{
            padding:vw(15);
            display: flex;
            align-items: center;
            i{
              font-size: vw(40);
            }
            span{
              margin-left: vw(10);
              font-size: vw(30);
            }
          }
        }
      }
    }
  }
}
</style>
